<script setup lang="ts" name="home">
  import { ref, onActivated, onDeactivated } from 'vue';
  import Makets from '../makets/Makets.vue';
  import Line from './components/line.vue';
  import { i18nTranslate, LANG_CONFIG, setLang } from '/@/i18n';
  import { getBanners, getNotices, getUserInfo, contentSettingsList, getQueryCarbonTrading } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  import withdrawImg from '/@images/home/withdraw.png';
  import rechargeImg from '/@images/home/recharge.png';
  import WhitePaperImg from '/@images/home/whitePaper.png';
  import mandateImg from '/@images/home/Support.png';
  import { useRouter } from 'vue-router';
  import { useUserId } from '/@/hooks';
  import { NotifyWarn } from '/@/utils';
  const IMG_URL = import.meta.env.VITE_IMG_URL;
  const router = useRouter();
  const popup_show = ref(false);
  const videoUrl = ref();
  const userInfo = ref();
  const { getUserId, setUserId } = useUserId();
  const bannerList = ref<any[]>([]);
  const guideData = ref(<any>{})
  const noticeNum = ref(1);
  const search = ref();
  const currencyChareList = ref<any[]>([]);
  const timer = ref();
  const aboutShow = ref(false);
  const menuList = ref([
    { src: rechargeImg, title: 'Recharge', link: '/me/recharge' },
    { src: withdrawImg, title: 'Withdraw', link: '/me/withdraw' },
    { src: WhitePaperImg, title: 'AboutUs', link: 'https://h-kai.com' },
    { src: mandateImg, title: 'customer', link: '/me/customer' },
  ]);
  const languagePopup = ref(false);
  const onSelect = (e: any) => {
    languagePopup.value = false;
    setLang(e.lang);
    getNotice();
    getGuide();
  };
  const bannerParams = ref({ bannerType: 'DATA_BANNER', global: '' });
  //获取banner图
  useRequest(getBanners, {
    defaultParams: [bannerParams.value],
    onSuccess(data: any) {
      bannerList.value = data;
    },
  });
  const getNotice = () => {
    useRequest(getNotices, {
      defaultParams: [{ noticeType: 'OFFICIAL', global: localStorage.getItem('lang') }],
      onSuccess(data: any) {
        noticesData.value = data;
      },
    });
  }
  getNotice();
  const getGuide = () => {
    useRequest(getNotices, {
      defaultParams: [{ noticeType: 'BeginnerGuide', global: localStorage.getItem('lang') }],
      onSuccess(data: any) {
        guideData.value = data.length ? data[0] : {};
      },
    });
  }
  getGuide();

  useRequest(getUserInfo, {
    defaultParams: [{ member: getUserId() }],
    onSuccess(data: any) {
      userInfo.value = data;
    },
  });
  const handleClick = (link: any) => {
    if (link) {
      window.open(link, '_self');
    }
  };
  const noticesData = ref<{ [xx: string]: any }>({});
  // 路由跳转
  const OnToRouter = (linkUrl: string) => {
    if (linkUrl.indexOf('http')>=0 || linkUrl.indexOf('https')>=0) {
      aboutShow.value = true;
      // window.location.href = linkUrl;
      return
    }
  
      // 未实名认证不能提现
  if (linkUrl === '/me/withdraw' && userInfo.value.cardState != 'PASS') {
    if (userInfo.value.cardState === 'WAIT') {
      NotifyWarn(i18nTranslate('Pleasewaitfortherealnameauthenticationauditresult'));
    } else {
      NotifyWarn(i18nTranslate('Pleaseauthenticatewithrealnamefirst'));
      router.push('/me/kyc');
    }
    return;
  }
  // 未绑定银行卡不能提现
  if (linkUrl === '/me/withdraw' && !(userInfo.value.bankCard || userInfo.value.moneyAddr)) {
    NotifyWarn(i18nTranslate('Pleasebindthebankcardfirst'));
    router.push('/me/bank');
    return;
  }
  router.push(linkUrl);
  }
  const handleSearch = () => {

  }
  const handleReward = () => {
    router.push('/welfareCenter');
  }
  const handleVideo = () => {
    popup_show.value = true;
  }
  useRequest(contentSettingsList, {
    defaultParams: [{ type: 3 }],
    onSuccess(data: any) {
      if (data.length) {
        if (data[0].img) {
          videoUrl.value = IMG_URL + '/' + data[0].img;
        } else if (data[0].content) {
          videoUrl.value = data[0].content;
        }
      }
    },
  });
  const settingColor = (val: number) => {
    const value = val < 0;

    if (value) {
      return { font_red1: true };
    }
    return { font_green1: true };
  };
  onActivated(() => {
    methodCurrencyList();
    times();
  });
  onDeactivated(() => {
    clearInterval(timer.value);
    timer.value = null;
  });
  const times = () => {
    timer.value = setInterval(methodCurrencyList, 5000);
  };
  function methodCurrencyList() {
    useRequest(getQueryCarbonTrading, {
      onSuccess: function (data: any) {
        
        if (!data.length) return;
        let carbonTradingList = [] as { [key: string]: any }[];
        data.forEach((item: { [key: string]: any }) => {
          if (item.symbol == 'XAU') {
            carbonTradingList.unshift(item);
          } else {
            carbonTradingList.push(item);
          }
        });
        let customArr: any[] = [];
        carbonTradingList.slice(0, 9).forEach((ele: any) => {
          if (!customArr[0]) {
            customArr.push([ele]);
          } else {
            if (customArr[customArr.length - 1].length < 3) {
              customArr[customArr.length - 1].push(ele);
            } else {
              customArr.push([ele]);
            }
          }
        });
        currencyChareList.value = customArr;
      },
    });
  }
</script>

<template>
  <div class="home">
    <AppBar :primary="true">
      <template #left>
        <div class="user_box">
          <div class="user_avatar_img">
            <img :src="$img('avatar.png')" />
          </div>
        </div>
      </template>
      <template #right>
        <div class="lang_icon" @click="languagePopup = true">
          <Icon name="icon-shouyeyuyan" />
        </div>
        <div class="lang_icon" @click="$router.push('/me/customer')">
          <Icon name="icon-kefu" />
        </div>
      </template>
    </AppBar>
    <div class="home_content">
      <!-- banner轮播 -->
      <div class="swipe">
        <var-swipe class="swipe-example" v-if="bannerList.length" :autoplay="3000">
          <var-swipe-item
            v-for="(item, index) in bannerList"
            @click="handleClick(item.linkUrl)"
            :key="index"
          >
            <div class="swipe-example-image">
              <CustomImage :src="IMG_URL + '/upload' + item.bannerUrl" />
            </div>
          </var-swipe-item>
        </var-swipe>
        <!-- <img v-else class="swipe-example-image" :src="$img('home/banner.png')" alt="" /> -->
        <!-- <div v-else class="loading"> loading... </div> -->
      </div>
      <!-- 公告 -->
      <div class="notice">
        <van-notice-bar>
          <template #default>
            <div class="notice_list">
              <div class="notice_li" v-for="(item, index) in noticesData" :key="index">
                <div> {{ item.title }} : </div>
                <div v-html="item.content"></div>
              </div>
            </div>
          </template>
          <template #left-icon>
            <div class="notice_icon">
              <img :src="$img('home/notice.svg')" alt="" />
            </div>
            <div v-if="!noticesData.length">{{ $t('Noannouncementyet') }}</div>
          </template>
        </van-notice-bar>
      </div>
      <div class="wallet_box">
        <div
          class="menu_li"
          v-for="(item, index) in menuList"
          :key="index"
          @click="OnToRouter(item.link)"
        >
          <div class="menu_icon">
            <img :src="item.src" alt="" />
          </div>
          <p>{{ i18nTranslate(item.title) }}</p>
        </div>
      </div>
      <div class="reward_box" @click="handleReward">
        <p class="reward_box_title">{{ $t('RewardZone') }}</p>
        <p class="reward_box_name">{{ $t('Clicktoreceiveairdropsandmissionrewards') }}</p>
      </div>
      <div class="content_box">
        <div class="content_item_box" @click="$router.push('me/beginnerGuide')">
          <p class="content_title">{{ $t('BeginnerGuide') }}</p>
          <div class="content-info flex-between">
            <p class="content_name" >{{ $t('minutestogetstarted') }}</p>
            <div class="img_box">
              <img :src="$img('home/guide.png')" />
            </div>
          </div>
        </div>
        <div class="content_item_box video_box" @click="handleVideo">
          <div class="video_img_box">
              <img :src="$img('home/video.jpg')" />
          </div>
        </div>
      </div>
      <!-- <div class="content_item_box">
        <p class="content_title">What is a second contract?</p>
        <p class="content_name">What is a second contract What is a second contract a second contract a second contracta second What is a second contract What is a second contract a second contract a second contracta second </p>
        <div class="img_box">
          <img :src="$img('home/content1.png')" />
        </div>
        <video width="220" height="109" controls>
          <source src="/example.mp4" type="video/mp4">
        </video>
      </div> -->
      <div class="reference_box">
        <var-swipe class="" :autoplay="5000">
          <var-swipe-item
            class="swipe_item"
            v-for="(item1, index1) in currencyChareList"
            :key="index1"
          >
            <div class="reference_box_li" v-for="(item2, index2) in item1" :key="index2">
              <p class="text1">{{ item2.symbol }}/USD</p>
              <p class="text2" :class="settingColor(item2.updown)">{{ item2.price }}</p>
              <p class="text3" :class="settingColor(item2.updown)">{{ item2.updown }}%</p>
              <!-- 折线图 -->
              <div>
                <Line :name="item2.symbol" :chgPct="item2.updown" />
              </div>
            </div>
          </var-swipe-item>
        </var-swipe>
      </div>
      <div class="content_list_box">
        <Makets />
      </div>
    </div>
    <van-popup v-model:show="popup_show">
      <video width="300" height="200" controls>
        <source :src="videoUrl" type="video/mp4">
      </video>
    </van-popup>
    <van-popup v-model:show="aboutShow" closeable :close-on-click-overlay="false" round>
      <div class="about_popup_box">
        <iframe src="https://h-kai.com" width="340px" height="100%" style="border:none;">  
         </iframe>  
      </div>
    </van-popup>
    <!--语言切换弹出层 -->
    <van-action-sheet
      class="actionSheet"
      v-model:show="languagePopup"
      :actions="LANG_CONFIG"
      @select="onSelect"
    />
  </div>
</template>

<style lang="scss" scoped>
  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .home {
    height: 100vh;
    //background-color: #ffffff;
    overflow-y: auto;
    .notice {
      .notice_list {
        display: flex;
        .notice_li {
          display: flex;
          margin-right: 20px;
        }
      }
      .notice_icon {
        width: 28px;
        height: 28px;
        margin-right: 10px;
        margin-top: -5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .swipe {
      margin: 0 30px;
      height: 262px;
    }
    .wallet_box {
      padding: 30px;
      @include align-center;
      justify-content: space-between;
      border-radius: 10px;
      //background: $body;

      .menu_li {
        color: rgba(255, 255, 255, 0.85);
        font-size: 24px;
        @include center;
        flex-direction: column;
        .menu_icon {
          width: 48px;
          height: 42px;
          margin-bottom: 20px;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .reward_box {
      width: calc(100% - 60px);
      height: 114px;
      margin: 0 30px 40px 30px;
      background-image: url('/@images/home/reward.png');
      background-size: 100% 100%;
      box-sizing: border-box;
      padding-left: 172px;
      .reward_box_title {
        color: rgba(255, 255, 255, 0.85);
        font-size: 30px;
        font-weight: 700;
        padding-top: 30px;
      }
      .reward_box_name {
        width: 84%;
        color: rgba(255, 255, 255, 0.45);
        font-size: 20px;
        margin-top: 5px;
      }
    }
    .content_box {
      padding: 0 30px 30px 30px;
      display: flex;
      justify-content: space-between;
      .content_item_box {
        width: 48%;
        height: 230px;
        border-radius: 16px;
        background: #242424;
        //padding: 34px 7px 4px 24px;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        .content_title {
          color: rgba(255, 255, 255, 0.85);
          font-size: 26px;
          font-weight: 700;
          margin-bottom: 16px;
          padding-top: 34px;
          margin-left: 24px;
        }
        .content_name {
          margin-top: 6px;
          line-height: 32px;
          color: rgba(255, 255, 255, 0.45);
          font-size: 22px;
          width: 45%;
          margin-left: 24px;
        }
        .img_box {
          width:140px;
          height: 140px;
          position: absolute;
          right: 20px;
          bottom: 20px;
          margin-top: 10px;
          margin-right: 7px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .video_box {
        //padding: 0;
        @include center;
        background-image: url('/@images/home/video.png');
        background-size: 100% 100%;
      }
      .video_img_box {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
    .reference_box {
      margin: 0 30px 30px 30px;
      .swipe_item {
        display: flex;
        justify-content: center;
        justify-content: space-between;
      }
      .reference_box_li {
        min-height: 260px;
        background: #242424;
        border-radius: 16px;
        width: 220px;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 24px;
        .text1 {
          font-size: 26px;
          margin-bottom: 10px;
        }
        .text2 {
          font-size: 32px;
          margin-bottom: 5px;
        }
        .text3 {
          font-size: 22px;
          font-weight: 400;
          margin-bottom: 10px;
        }
      }
      .font_red1 {
        color: #ff5d5f;
      }
      .font_green1 {
        color: #4ca335;
      }
    }
    .content_list_box {
      background-color: #242424;
      border-radius: 50px 50px 0px 0px;
      //padding: 30px;
      .content_list_item {
        border-radius: 16px;
        box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.07);
        background: rgb(255, 255, 255);
        padding: 30px 25px 30px 30px;
        margin-bottom: 16px;
        .icon_box {
          width: 80px;
          height: 80px;
          margin-right: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .line_box {
          width: 100px;
          height: 50px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content_list_title {
          color: rgba(255, 255, 255, 0.85);
          font-size: 30px;
        }
        .content_list_count {
          color: rgba(255, 255, 255, 0.85);
          font-size: 32px;
        }
        .content_list_rate_green {
          color: rgb(33, 191, 115);
          font-size: 24px;
          margin-top: 10px;
        }
        .content_list_rate_red {
          color: rgb(217, 4, 41);
          font-size: 24px;
          margin-top: 10px;
        }
        .content_list_name {
          color: rgba(255, 255, 255, 0.45);
          font-size: 24px;
          margin-top: 10px;
        }
      }
      .content_list_item:last-child {
        margin-bottom: 0;
      }
    }
  }
  .about_popup_box {
    padding-top: 50px;
    height: 90vh;
  }
</style>

<style lang="scss">
  .home {
    
    .maketsList-list {
      .li:last-child {
        margin-bottom: 0;
      }
    }
    .var-swipe__track {
      height: 262px !important;
      width: 100%;
    }
    .var-swipe {
      position: relative;
    }

    .var-swipe__indicators {
      bottom: 0px;
    }

    .var-swipe__indicator {
      background: #000000;
      opacity: 0.1;
      &.var-swipe--indicator-active {
        background: #0063f5;
        opacity: 1;
      }
    }
    .van-action-sheet__content {
      padding: 50px 20px;
      background-color: #242424;
      .van-action-sheet__item {
        background-color: #242424;
        color: #ffffff;
      }
    }
    .van-notice-bar {
      border-radius: 44px;
      background: $body;
      color: rgb(255, 255, 255);
      font-size: 20px;
    }

    .user_box {
      .user_avatar_img {
        width: 62px;
        height: 62px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .var-app-bar__toolbar {
      margin: 0 20px;
    }
    .lang_icon {
      margin-left: 25px;
      .icon {
        color: rgba(255, 255, 255, 0.65);
      }
    }
    .var-app-bar {
      background-color: $body;
    }
  }
</style>
